<template>
  <div class="common-warp wh100 warp-bg rule-warp">
    <div class="noo">
      <a-card title="基本信息">
        <a-form ref="formRefa" :model="state.forma" :rules="rules">
          <a-form-item label="班次名称" name="name">
            <a-input v-model:value="state.forma.name" />
          </a-form-item>
        </a-form>
      </a-card>

      <a-card title="关联配置" style="margin-top: 12px">
        <a-form ref="formRefb" :model="state.formb">
          <a-form-item label="考勤组" name="teamCode">
            <a-select v-model:value="state.formb.teamCode" style="width: 100%">
              <a-select-option
                v-for="item in state.teamList"
                :value="item.code"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="考勤规则" name="ruleCode">
            <a-select v-model:value="state.formb.ruleCode" style="width: 100%">
              <a-select-option
                v-for="item in state.ruleList"
                :value="item.code"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </a-card>

      <a-card title="时间配置" style="margin-top: 12px; margin-bottom: 12px">
        <a-form ref="formRefc" :model="state.formc">
          <a-form-item label="开始时间" name="inStart">
            <a-date-picker
              v-model:value="state.formc.startOn"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
              style="width: 100%"
            />
          </a-form-item>
          <a-form-item label="结束时间" name="inTime">
            <a-date-picker
              v-model:value="state.formc.endOn"
              valueFormat="YYYY-MM-DD"
              format="YYYY-MM-DD"
              style="width: 100%"
            />
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <a-button type="primary" block @click="confirm(formRefa)">提交</a-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import {
  useAccessTimezoneListApi,
  useAttendPlanCreateApi,
  useAttendRuleListApi,
  useAttendTeamListApi,
} from "@/api/index";
import { message } from "ant-design-vue";
import type { CodeName } from "@/types/common";

const router = useRouter();
const formRefa = ref();
const formRefb = ref();
const formRefc = ref();

const rules = {
  name: [{ required: true, message: "请输入分组名称", trigger: "change" }],
};

const useContenta = () => {
  return {
    code: "",
    name: "",
  };
};
const useContentb = () => {
  return {
    teamCode: "",
    ruleCode: "",
  };
};

const useContentc = () => {
  return {
    endOn: "",
    startOn: "",
  };
};

const state = reactive({
  forma: useContenta(),
  formb: useContentb(),
  formc: useContentc(),
  teamList: [] as CodeName[],
  ruleList: [] as CodeName[],
});

//提交
const confirm = (formRef: any) => {
  if (!formRef) return;
  formRef.validate().then(async () => {
    if (state.formc.startOn > state.formc.endOn) {
      message.error("开始时间应小于等于结束时间", 3);
      return;
    }
    await useAttendPlanCreateApi({
      ...state.forma,
      ...state.formb,
      ...state.formc,
    });
    message.success("操作成功", 2);
    setTimeout(() => {
      router.push({ name: "AttentPlan" });
    }, 2300);
  });
};

const getTeamList = async () => {
  let { data } = await useAttendTeamListApi();
  state.teamList = data;
};
const getRuleList = async () => {
  let { data } = await useAttendRuleListApi();
  state.ruleList = data;
};

onMounted(() => {
  let ainput = document.querySelectorAll(".rule-warp .ant-picker-input input");
  ainput.forEach((item: any) => {
    item.addEventListener("focus", () => {
      item.setAttribute("readonly", "false");
    });
  });
  getTeamList();
  getRuleList();
  document.title = "新增";
});
</script>
<style scoped lang="less">
.noo {
  height: calc(100vh - 56px);
  overflow-y: scroll;

  :deep(.ant-form-item-label) {
    padding: 0 !important;
  }

  :deep(.ant-card-body) {
    padding: 12px !important;
  }

  :deep(.ant-card-head) {
    padding: 12px !important;
  }

  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }
}
</style>
